<template>
  <div class="container">
    <div class="titledesk" v-show="!isZhongjiang && !isLoginZhongjiang && !isLoginZhongjiangNo">
      <img src="../assets/titledesk.png" alt="" />
    </div>
    <div class="title2desk" v-show="!isZhongjiang && !isLoginZhongjiang && !isLoginZhongjiangNo">
      <img src="../assets/title2desk.png" alt="" />
    </div>
    <!-- username -->
    <div class="titleusername" v-show="username && !isLoginZhongjiang && !isZhongjiang">
      <img v-for="(imgSrc, index) in imageList" :key="index" :src="imgSrc" alt="letter" />
    </div>
    <div ref="turntableRef" class="turntable" v-show="centerShow" :style="sdl">
      <div class="turntable-wrapper">
        <div class="turntable__bg1"></div>
        <div class="turntable__bg2"></div>
        <div class="turntable__container">
          <div
            v-for="(item, idx) in config.items"
            :key="item.id"
            class="turntable__item"
            :style="`--idx: ${idx}`"
          >
            <img :src="item.imgUrl" alt="" />
          </div>
        </div>
      </div>
      <div class="turntable-button">
        <div class="turntable-button__innerdrak" v-if="drawnum == 4"></div>
        <div class="turntable-button__inner" v-else @click="handleClick"></div>
      </div>
      <div class="dizuo"></div>
      <div class="dizuofood"></div>
      <!-- 登录 -->
      <!-- 最大 -->
      <div class="maxmoneyClass">
        <img src="../assets/moneydeskmax_25.png" v-if="moneymax_25" />
        <img src="../assets/moneydeskmax_50.png" v-if="moneymax_50" />
        <img src="../assets/moneydeskmax_100.png" v-if="moneymax_100" />
        <img src="../assets/moneydeskmax_500.png" v-if="moneymax_500" />
      </div>
      <div class="loginimg" v-if="!username">
        <div @click="headerLoginClick"><img :src="logindeskimg" /></div>
      </div>
      <div class="moneydisplayClass" v-if="username">
        <div class="flex">
          <div v-for="(item, index) in drawResult" :key="index">
            <div>
              <img :src="item.img" alt="" />
            </div>
          </div>
        </div>
        <div>
          <div class="login1st"><img src="../assets/1st.png" alt="" /></div>
          <div class="login2nd"><img src="../assets/2nd.png" alt="" /></div>
          <div class="login3rd"><img src="../assets/3rd.png" alt="" /></div>
        </div>
      </div>
    </div>
    <div class="dialoglogin" v-show="isLoginZhongjiang">
      <div class="dialog-container">
        <img src="../assets/loginnamedesk.png" />
        <div
          ref="customInput"
          class="logininputtext"
          contenteditable="true"
          @input="handleInput"
        ></div>
        <div class="xdeskClass" @click="isLoginZhongjiangClose">
          <img src="../assets/xdesk.png" alt="" />
        </div>
        <div class="verifydeskClass" @click="loginsubmit">
          <img src="../assets/verifydesk.png" alt="" />
        </div>
        <div class="enteryournamedeskClass" v-if="placeholderNumber === 0">
          <img src="../assets/enteryournamedesk.png" alt="" />
        </div>
        <div class="linedeskClass">
          <img src="../assets/linedesk.png" alt="" />
        </div>
      </div>
    </div>
    <div class="dialoglogin" v-show="isLoginZhongjiangNo">
      <div class="dialog-container" @click="isLoginZhongjiangNoClose">
        <img src="../assets/chancenodesk.png" />
      </div>
    </div>
    <div class="dialoglogin" v-show="isjihuizerodesk">
      <div class="dialog-container" @click="isjihuizerodeskClose">
        <img src="../assets/jihuizerodesk.png" />
      </div>
    </div>
    <!-- 中奖dialog-->
    <div class="dialoglogin" v-show="isZhongjiang">
      <div class="dialog-container" @click="moneyConfirmClose">
        <!-- 1中 -->
        <div style="cursor: pointer">
          <img src="../assets/moneydesk3_25.png" v-if="moneyone_25" />
          <img src="../assets/moneydesk3_50.png" v-if="moneyone_50" />
          <img src="../assets/moneydesk3_100.png" v-if="moneyone_100" />
          <img src="../assets/moneydesk3_500.png" v-if="moneyone_500" />
        </div>
        <!-- 2中 -->
        <div style="cursor: pointer">
          <img src="../assets/moneydesk2_25.png" v-if="moneytwo_25" />
          <img src="../assets/moneydesk2_50.png" v-if="moneytwo_50" />
          <img src="../assets/moneydesk2_100.png" v-if="moneytwo_100" />
          <img src="../assets/moneydesk2_500.png" v-if="moneytwo_500" />
        </div>
        <!-- 3中 -->
        <div style="cursor: pointer">
          <img src="../assets/moneydesk1_25.png" v-if="moneythree_25" />
          <img src="../assets/moneydesk1_50.png" v-if="moneythree_50" />
          <img src="../assets/moneydesk1_100.png" v-if="moneythree_100" />
          <img src="../assets/moneydesk1_500.png" v-if="moneythree_500" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import {
  getIndex,
  getLogin,
  getDrawList,
  getDrawConfirm,
  getDrawResult,
  getResetDraw,
} from '@/api/index'
import zhongjiang500 from '../assets/500.png'
import zhongjiang100 from '../assets/100.png'
import zhongjiang50 from '../assets/50.png'
import zhongjiang25 from '../assets/25.png'
import mob25light from '../assets/mob25light.png'
import mob50light from '../assets/mob50light.png'
import mob100light from '../assets/mob100light.png'
import mob500light from '../assets/mob500light.png'
import mob25drak from '../assets/mob25drak.png'
import mob50drak from '../assets/mob50drak.png'
import mob100drak from '../assets/mob100drak.png'
import mob500drak from '../assets/mob500drak.png'
import empty from '../assets/emptymob.png'
import logindeskimg from '../assets/logindesk.png'
interface TurntableConfig {
  /* 修正角度，由于轮盘背景由图片决定, 需要适当修正奖项的默认角度 */
  correctAngle: number
  /* 轮盘大小 */
  size?: string
  /* 轮盘当前旋转的角度 */
  currentAngle: number
  /* 轮盘进行旋转时的持续时间 */
  duration: number
  /* 缓动函数 */
  cuber: string
  /* 在进行抽奖时额外选择的圈数 */
  laps: number
  /* 是否正在进行旋转 */
  isRotating: boolean
  /* 是否允许轮盘在滑动到指定目标时不是指向正中间，增加随机性 */
  allowRandom: boolean
  /* 是否允许自传 */
  allowSelfRotate: boolean
  /* 自转的速度, 一秒多少个deg */
  selfRotateSpeed: number
  /* 轮盘的奖项 */
  items: Array<{
    /* 奖项ID */
    id: number
    /* 奖项描述文字 */
    description: string
    /* 奖项描述图片 */
    imgUrl?: string
  }>
}

const config = ref<TurntableConfig>({
  correctAngle: 0,
  size: '550px',
  currentAngle: 0,
  laps: 10,
  allowRandom: true,
  duration: 5000,
  cuber: 'ease-in-out',
  isRotating: false,
  allowSelfRotate: false,
  selfRotateSpeed: 15,
  items: [
    {
      id: 0,
      description: '500',
      imgUrl: zhongjiang500,
    },
    {
      id: 4,
      description: '25',
      imgUrl: zhongjiang25,
    },
    {
      id: 1,
      description: '50',
      imgUrl: zhongjiang50,
    },
    {
      id: 3,
      description: '100',
      imgUrl: zhongjiang100,
    },
    {
      id: 2,
      description: '50',
      imgUrl: zhongjiang50,
    },

    {
      id: 5,
      description: '25',
      imgUrl: zhongjiang25,
    },
  ],
})

const sdl = computed(() => ({
  '--size': config.value.size || '400px',
  '--current-angle': `${config.value.currentAngle}deg`,
  '--item-angle-size': `${360 / config.value.items.length}deg`,
  '--item-correct-angle': `${config.value.correctAngle}deg`,
  '--rotate-duration': `${config.value.duration}ms` || '700ms',
  '--rotate-cuber': config.value.cuber,
}))

const turntableRef = ref()

watch(
  () => config.value.allowSelfRotate,
  () => {
    if (config.value.allowSelfRotate) {
      selfRotate()
    } else {
      config.value.cuber = 'ease-in-out'
    }
  },
)

// 主图
const centerShow = ref(true)
// 登录按钮
const loginButtonShow = ref(true)
// 登录弹窗
const isLoginZhongjiang = ref(false)
// 登录username
const imageList: any = ref([])
// 显示登录placeholder
const placeholderNumber = ref(0)
// Token
const token: any = ref('')
// UserName
const username: any = ref('')
// 抽奖token
const drawToken: any = ref('')
// 中奖弹窗
const isZhongjiang = ref(false)
// 中奖show
const moneyone_25 = ref(false)
const moneyone_50 = ref(false)
const moneyone_100 = ref(false)
const moneyone_500 = ref(false)

const moneytwo_25 = ref(false)
const moneytwo_50 = ref(false)
const moneytwo_100 = ref(false)
const moneytwo_500 = ref(false)

const moneythree_25 = ref(false)
const moneythree_50 = ref(false)
const moneythree_100 = ref(false)
const moneythree_500 = ref(false)

// 抽奖次数
const drawnum = ref(0)
// 所有抽奖结果
const drawResult: any = ref([
  {
    draw_token: '45a70f141f1044a392e9903e5794dfa2',
    draw_result: '25',
    draw_time: '',
    img: empty,
  },
  {
    draw_token: 'ec293403182348f6bab54f95d235b263',
    draw_result: '25',
    draw_time: '',
    img: empty,
  },
  {
    draw_token: '9314dfe8f0464a428243710071003beb',
    draw_result: '25',
    draw_time: '',
    img: empty,
  },
])
// 显示最大奖数
const moneymax_25 = ref(false)
const moneymax_50 = ref(false)
const moneymax_100 = ref(false)
const moneymax_500 = ref(false)
// 无机会
const isLoginZhongjiangNo = ref(false)
async function slideTo(id: number) {
  if (config.value.isRotating) return

  config.value.isRotating = true
  config.value.allowSelfRotate = false

  const oldAngle = config.value.currentAngle
  const itemAngleSize = 360 / config.value.items.length
  const aimAngle = itemAngleSize * (config.value.items.length - id)
  const moveAngle =
    aimAngle - (oldAngle % 360) - config.value.correctAngle + config.value.laps * 360
  const randomAngle = config.value.allowRandom ? (Math.random() * 2 - 1) * (itemAngleSize / 2) : 0

  config.value.currentAngle += moveAngle + randomAngle
  await delay(config.value.duration + 300)

  config.value.isRotating = false
}

async function selfRotate() {
  if (!config.value.allowSelfRotate) return
  config.value.cuber = 'linear'

  config.value.currentAngle += (config.value.duration / 1000) * config.value.selfRotateSpeed
  await delay(config.value.duration)
  selfRotate()
}

async function handleClick() {
  if (token.value && username.value) {
    let res: any = await getDrawList({ token: token.value, username: username.value })
    if (res.code === 200) {
      drawnum.value += 1
      let money = res.draw_result
      drawToken.value = res.draw_token
      let id = 5
      config.value.items.forEach((item: any) => {
        if (item.description === money) {
          id = item.id
        }
      })
      await slideTo(id)
      centerShow.value = false
      isZhongjiang.value = true
      // 如果是第一次,存下来
      if (drawnum.value === 1) {
        if (money == '25') {
          moneyone_25.value = true
        } else if (money == '50') {
          moneyone_50.value = true
        } else if (money == '100') {
          moneyone_100.value = true
        } else if (money == '500') {
          moneyone_500.value = true
        }
      } else if (drawnum.value === 2) {
        if (money == '25') {
          moneytwo_25.value = true
        } else if (money == '50') {
          moneytwo_50.value = true
        } else if (money == '100') {
          moneytwo_100.value = true
        } else if (money == '500') {
          moneytwo_500.value = true
        }
      } else if (drawnum.value === 3) {
        if (money == '25') {
          moneythree_25.value = true
        } else if (money == '50') {
          moneythree_50.value = true
        } else if (money == '100') {
          moneythree_100.value = true
        } else if (money == '500') {
          moneythree_500.value = true
        }
      }
    }
  }

  // const aimId = Math.floor(Math.random() * config.value.items.length)
  // console.log(aimId + 1)
  // await slideTo(aimId)
  // centerShow.value = false
}
// 抽奖确认
const moneyConfirmClose = async () => {
  if (drawnum.value !== 4) {
    await getDrawConfirm({
      token: token.value,
      username: username.value,
      draw_token: drawToken.value,
    })
  }

  // 抽奖结果应该返回一个数组
  let res1 = await getDrawResult({
    token: token.value,
    username: username.value,
  })
  drawResult.value = res1.data
  drawResult.value.sort((a: any, b: any) => {
    // 如果 a.draw_time 和 b.draw_time 都为空，返回 0
    if (!a.draw_time && !b.draw_time) return 0

    // 如果 a.draw_time 为空，放到后面
    if (!a.draw_time) return 1

    // 如果 b.draw_time 为空，放到后面
    if (!b.draw_time) return -1

    // 如果两者都有时间，按时间排序
    const dateA: any = new Date(a.draw_time)
    const dateB: any = new Date(b.draw_time)
    return dateA - dateB
  })
  drawResult.value.forEach((item: any) => {
    if (item.draw_time) {
      if (item.draw_result == '25') {
        item.img = mob25light
      } else if (item.draw_result == '50') {
        item.img = mob50light
      } else if (item.draw_result == '100') {
        item.img = mob100light
      } else if (item.draw_result == '500') {
        item.img = mob500light
      } else {
        item.img = empty
      }
    } else {
      item.img = empty
    }
  })

  moneyone_25.value = false
  moneyone_50.value = false
  moneyone_100.value = false
  moneyone_500.value = false
  moneytwo_25.value = false
  moneytwo_50.value = false
  moneytwo_100.value = false
  moneytwo_500.value = false
  moneythree_25.value = false
  moneythree_50.value = false
  moneythree_100.value = false
  moneythree_500.value = false
  moneymax_25.value = false
  moneymax_50.value = false
  moneymax_100.value = false
  moneymax_500.value = false
  if (drawnum.value == 0 || drawnum.value == 1 || drawnum.value == 2) {
    isZhongjiang.value = false
    centerShow.value = true
  } else if (drawnum.value == 3) {
    console.log(drawResult.value, 'drawResult.value')
    // 显示最大的抽奖结果
    const maxResultItem = drawResult.value.reduce((max: any, item: any) => {
      return Number(item.draw_result) > Number(max.draw_result) ? item : max
    }, drawResult.value[0]) // 初始化为第一个对象

    if (maxResultItem.draw_result == '25') {
      moneymax_25.value = true
    } else if (maxResultItem.draw_result == '50') {
      moneymax_50.value = true
    } else if (maxResultItem.draw_result == '100') {
      moneymax_100.value = true
    } else if (maxResultItem.draw_result == '500') {
      moneymax_500.value = true
    }
    drawnum.value++
    isZhongjiang.value = false
    centerShow.value = true
    // 1. 找到 draw_result 的最大值
    const maxResult = Math.max(...drawResult.value.map((item: any) => Number(item.draw_result)))

    // 2. 找到最后一个最大值对象的索引
    const lastIndex = drawResult.value
      .map((item: any) => Number(item.draw_result))
      .lastIndexOf(maxResult)

    // 3. 设置最后一个最大值对象的 draw_time 为 "max"
    drawResult.value[lastIndex].draw_time = 'max'

    drawResult.value.forEach((element: any) => {
      if (element.draw_time !== 'max') {
        if (element.draw_result == '25') {
          element.img = mob25drak
        } else if (element.draw_result == '50') {
          element.img = mob50drak
        } else if (element.draw_result == '100') {
          element.img = mob100drak
        } else if (element.draw_result == '500') {
          element.img = mob500drak
        }
      }
    })
  } else {
    console.log(drawnum.value, 'drawnum.value')
  }
}
// 点击登录
const headerLoginClick = () => {
  centerShow.value = false
  isLoginZhongjiang.value = true
}
const isLoginZhongjiangClose = () => {
  isLoginZhongjiang.value = false
  centerShow.value = true
}
const customInput: any = ref(null)
const allowedChars = /^[a-zA-Z.]$/ // 仅允许字母和点

const handleKeydown = (event: any) => {
  const char = event.key

  // 允许删除操作
  if (char === 'Backspace' || char === 'Delete' || event.key.length > 1) {
    return
  }

  // 检查是否是字母或点
  if (!allowedChars.test(char)) {
    event.preventDefault() // 阻止非字母输入
    return
  }

  event.preventDefault() // 阻止默认插入字符行为

  // 创建字母对应的图片
  const img = document.createElement('img')
  img.classList.add('letter-img')
  if (char !== ' ') {
    // 加载小写或大写字母的图片
    if (char === '.') {
      img.src = '/images/capital_dot.png' // 点的图片路径
    } else if (char === char.toLowerCase()) {
      img.src = `/images/capital_${char.toUpperCase()}.png` // 小写图片路径
    } else {
      img.src = `/images/capital_${char.toUpperCase()}.png` // 大写图片路径
    }
  }

  // 插入图片并设置光标
  insertAtCursor(img)
}

// 在光标位置插入元素
const insertAtCursor = (element: any) => {
  const sel: any = window.getSelection()
  const range = sel.getRangeAt(0)

  range.deleteContents() // 清除选中内容（如有）
  range.insertNode(element) // 插入新的图片节点

  // 移动光标到插入图片之后
  range.setStartAfter(element)
  range.collapse(true)
  sel.removeAllRanges()
  sel.addRange(range)
  placeholderNumber.value = customInput.value.childNodes.length
}

const handleInput = (event: any) => {
  const nodes = customInput.value.childNodes
  nodes.forEach((node: any) => {
    if (node.nodeType === Node.TEXT_NODE && !allowedChars.test(node.textContent)) {
      node.remove() // 移除非允许字符
    }
  })
}
const loginsubmit = async () => {
  let result = ''
  // 遍历 contenteditable 内容
  const children = customInput.value.childNodes
  children.forEach((node: any) => {
    if (node.nodeType === Node.TEXT_NODE) {
      // 文本节点直接追加
      result += node.textContent
    } else if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'IMG') {
      // 从 img 标签的 src 提取字母信息
      const src = node.src
      console.log('IMG node src:', node.src)
      const letterMatch = src.match(/_(\w+)\.png$/) // \w+ 匹配多字符，如 "dot"
      if (letterMatch) {
        const matchedChar = letterMatch[1]
        result += matchedChar === 'dot' ? '.' : matchedChar
      }
    }
  })
  let upperResult = '' // 用于存储转换后的字符串

  for (const char of result) {
    upperResult += char.toUpperCase() // 拼接大写字符
  }

  if (!upperResult) {
    return
  }

  let res: any = await getLogin({ token: token.value, username: upperResult })
  if (res.code === 200) {
    username.value = res.username
    isLoginZhongjiang.value = false
    centerShow.value = true
    convertStringToImages(username.value)
  } else if (res.code == 300) {
    // 用户已经注册
    isLoginZhongjiang.value = false
    centerShow.value = true
    let res1 = await getDrawResult({
      token: token.value,
      username: upperResult,
    })
    username.value = upperResult
    drawResult.value = res1.data
    drawResult.value.sort((a: any, b: any) => {
      // 如果 a.draw_time 和 b.draw_time 都为空，返回 0
      if (!a.draw_time && !b.draw_time) return 0

      // 如果 a.draw_time 为空，放到后面
      if (!a.draw_time) return 1

      // 如果 b.draw_time 为空，放到后面
      if (!b.draw_time) return -1

      // 如果两者都有时间，按时间排序
      const dateA: any = new Date(a.draw_time)
      const dateB: any = new Date(b.draw_time)
      return dateA - dateB
    })
    drawResult.value.forEach((item: any) => {
      if (item.draw_time) {
        if (item.draw_result == '25') {
          item.img = mob25light
        } else if (item.draw_result == '50') {
          item.img = mob50light
        } else if (item.draw_result == '100') {
          item.img = mob100light
        } else if (item.draw_result == '500') {
          item.img = mob500light
        } else {
          item.img = empty
        }
        drawnum.value++
      } else {
        item.img = empty
      }
    })
    if (drawnum.value === 3) {
      // 显示最大的抽奖结果
      const maxResultItem = drawResult.value.reduce((max: any, item: any) => {
        return Number(item.draw_result) > Number(max.draw_result) ? item : max
      }, drawResult.value[0]) // 初始化为第一个对象

      if (maxResultItem.draw_result == '25') {
        moneymax_25.value = true
      } else if (maxResultItem.draw_result == '50') {
        moneymax_50.value = true
      } else if (maxResultItem.draw_result == '100') {
        moneymax_100.value = true
      } else if (maxResultItem.draw_result == '500') {
        moneymax_500.value = true
      }
      // 1. 找到 draw_result 的最大值
      const maxResult = Math.max(...drawResult.value.map((item: any) => Number(item.draw_result)))

      // 2. 找到最后一个最大值对象的索引
      const lastIndex = drawResult.value
        .map((item: any) => Number(item.draw_result))
        .lastIndexOf(maxResult)

      // 3. 设置最后一个最大值对象的 draw_time 为 "max"
      drawResult.value[lastIndex].draw_time = 'max'

      drawResult.value.forEach((element: any) => {
        if (element.draw_time !== 'max') {
          if (element.draw_result == '25') {
            element.img = mob25drak
          } else if (element.draw_result == '50') {
            element.img = mob50drak
          } else if (element.draw_result == '100') {
            element.img = mob100drak
          } else if (element.draw_result == '500') {
            element.img = mob500drak
          }
        }
      })
      drawnum.value++
    }
  } else if (res.code == 400) {
    isLoginZhongjiang.value = false
    // 满了不能注册
    isjihuizerodesk.value = true
  } else {
    isLoginZhongjiang.value = false
    isLoginZhongjiangNo.value = true
  }
}
const isjihuizerodesk = ref(false)

const isjihuizerodeskClose = () => {
  isjihuizerodesk.value = false
  centerShow.value = true
}
const isLoginZhongjiangNoClose = () => {
  isLoginZhongjiangNo.value = false
  centerShow.value = true
}
const convertStringToImages = (str: any) => {
  // 清空图片列表
  imageList.value = []
  // 遍历字符串
  for (const char of str) {
    if (char !== ' ') {
      if (char === '.') {
        const imgPath = `/images/capital_dot.png` // 小写图片路径
        imageList.value.push(imgPath)
      } else if (char === char.toLowerCase()) {
        const imgPath = `/images/capital_${char.toUpperCase()}.png` // 小写图片路径
        imageList.value.push(imgPath)
      } else {
        const imgPath = `/images/capital_${char.toUpperCase()}.png` // 大写图片路径
        imageList.value.push(imgPath)
      }
    }
  }
}

onMounted(async () => {
  const url = new URL(window.location.href)
  const tokenUrl = url.searchParams.get('token')
  token.value = tokenUrl
  if (!token.value) {
    centerShow.value = false
    return
  }
  let res = await getIndex({ token: token.value })
  if (res.code !== 200) {
    centerShow.value = false
  }

  // 上线注释
  // await getResetDraw({ token: token.value })
  customInput.value?.addEventListener('keydown', handleKeydown)
  if (config.value.allowSelfRotate) {
    selfRotate()
  }
})

function delay(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms))
}
</script>

<style lang="scss" scoped>
body {
  margin: 0;
  padding: 0;
}

.container {
  background-image: url('../assets/beijingdesk.png');
  background-size: 100% 100%; /* 宽度平铺，高度保持图片本身比例 */
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.titledesk {
  position: absolute;
  top: 100px;
  left: 0px;
}
.title2desk {
  position: absolute;
  top: 80px;
  right: 75px;
}
.titleusername {
  position: absolute;
  top: 80px;
  left: 30px;
}
.turntable {
  position: relative;
  width: 550px;
  margin: 160px auto;
  height: 380px;
  --size: 550px;
  --current-angle: 0deg;
  --item-angle-size: 60deg;
  --item-correct-angle: 30deg;
  --rotate-duration: 700ms;
  --rotate-cuber: 'ease-in-out';
}

.turntable-wrapper {
  position: absolute;
  z-index: 3;
  transition: all var(--rotate-duration) var(--rotate-cuber);
  transform: rotate(var(--current-angle));
  width: 100%;
  height: 100%;
}

.turntable__bg1,
.turntable__bg2 {
  width: 82%;
  aspect-ratio: 1/1;
  user-select: none;
  user-focus: none;

  background: url('../assets/whitedipan.png') center center no-repeat;
  background-size: cover;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}

.turntable__bg2 {
  width: 100%;
  border-radius: 50%;
  // background: url('https://funimg.pddpic.com/spi_main/turntable_wrapper_bg.png.slim.png') center
  //   center no-repeat;
  background: url('../assets/bigdish.png') center center no-repeat;
  background-size: contain;

  z-index: 3;
}

.turntable__container {
  user-select: none;
  user-focus: none;

  & * {
    user-select: inherit;
    user-focus: inherit;
  }

  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;

  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.turntable__item {
  height: 50%;
  width: 33%;
  //border: solid 1px #e3d1d1;
  transform: rotate(calc(var(--item-angle-size) * var(--idx) + var(--item-correct-angle) + 0deg));
  transform-origin: center bottom;
  position: absolute;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 0px;
  font-size: 20px;
  font-weight: bold;
  color: #f10f31;

  img {
    width: 70%;
  }
}

.turntable-button {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 46%;
  aspect-ratio: 1/1;
  font-size: 20px;
  font-weight: bold;
  color: #e9f5f1;

  .turntable-button__inner {
    height: 100%;
    width: 100%;
    background: url('../assets/buttondesk.png') center center no-repeat;
    background-size: contain;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .turntable-button__innerdrak {
    height: 100%;
    width: 100%;
    background: url('../assets/buttondeskdrak.png') center center no-repeat;
    background-size: contain;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.dizuo {
  position: absolute;
  top: 71%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1/1;
  font-size: 20px;
  font-weight: bold;
  color: #e9f5f1;
  height: 138%;
  width: 130%;
  background: url('../assets/mapleleafdesk.png') center center no-repeat;
}
.dizuofood {
  position: absolute;
  top: 146%;
  left: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  aspect-ratio: 1/1;
  font-size: 20px;
  font-weight: bold;
  color: #e9f5f1;
  height: 116%;
  width: 164%;
  background: url('../assets/dizuodesk.png');
}
.loginimg {
  position: absolute;
  top: 52%;
  left: 116%;
  height: 100%;
  width: 100%;
  z-index: 5;
}
.maxmoneyClass {
  position: absolute;
  top: 0%;
  left: 100%;
  height: 100%;
  width: 100%;
  z-index: 5;
}
.moneydisplayClass {
  position: absolute;
  top: 80%;
  left: 100%;
  height: 150px;
  z-index: 5;
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
      margin-left: 5px;
      margin-right: 5px;
    }
  }
  .login1st {
    position: absolute;
    top: 2%;
    left: 14%;
  }
  .login2nd {
    position: absolute;
    top: 2%;
    left: 46%;
  }
  .login3rd {
    position: absolute;
    top: 2%;
    left: 80%;
  }
}
.dialoglogin {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  .logininputtext {
    position: absolute;
    top: 181px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    min-height: 69px;
    border: 0px solid #ccc;
    font-size: 30px;
    outline: none;
    z-index: 2;
  }
  .xdeskClass {
    position: absolute;
    top: -10px;
    right: 25px;
  }
  .verifydeskClass {
    position: absolute;
    top: 430px;
    right: 30px;
  }
  .enteryournamedeskClass {
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  .linedeskClass {
    position: absolute;
    top: 260px;
    left: 208px;
  }
}
</style>
